<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 via-blue-50 to-indigo-50">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
      <div class="absolute -top-40 -right-40 w-80 h-80 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
      <div class="absolute top-40 left-40 w-80 h-80 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-8 py-10 pt-32 relative z-10">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl font-bold mb-6 text-gray-900">企业培训</h1>
        <p class="text-xl text-gray-600 max-w-4xl mx-auto">
          为企业量身定制的专业培训解决方案，助力企业提升员工技能，增强核心竞争力。
        </p>
      </div>

      <!-- 服务特色 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-3xl"><UserFilled /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">定制化方案</h3>
          <p class="text-gray-600 leading-relaxed">
            根据企业实际需求，量身定制培训课程和教学计划，确保培训效果最大化。
          </p>
        </div>
        
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-3xl"><VideoPlay /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">灵活学习方式</h3>
          <p class="text-gray-600 leading-relaxed">
            支持线上直播、录播回放、混合式教学等多种学习方式，适应不同企业需求。
          </p>
        </div>
        
        <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 text-center">
          <div class="w-20 h-20 bg-gradient-to-br from-purple-500 to-pink-600 rounded-2xl flex items-center justify-center mx-auto mx-auto mb-6">
            <el-icon class="text-white text-3xl"><DataAnalysis /></el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">学习数据分析</h3>
          <p class="text-gray-600 leading-relaxed">
            提供详细的学习数据分析和报告，帮助企业了解培训效果和员工学习情况。
          </p>
        </div>
      </div>

      <!-- 培训领域 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">培训领域</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 border border-blue-200">
            <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mb-4">
              <el-icon class="text-white text-2xl"><Monitor /></el-icon>
            </div>
            <h4 class="text-xl font-semibold text-gray-900 mb-3">技术技能</h4>
            <ul class="space-y-2 text-gray-700 text-sm">
              <li>• 编程开发技能</li>
              <li>• 数据分析能力</li>
              <li>• 云计算技术</li>
              <li>• 人工智能应用</li>
            </ul>
          </div>
          
          <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 border border-green-200">
            <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-4">
              <el-icon class="text-white text-2xl"><User /></el-icon>
            </div>
            <h4 class="text-xl font-semibold text-gray-900 mb-3">管理技能</h4>
            <ul class="space-y-2 text-gray-700 text-sm">
              <li>• 项目管理</li>
              <li>• 团队领导力</li>
              <li>• 沟通协作</li>
              <li>• 决策分析</li>
            </ul>
          </div>
          
          <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-6 border border-purple-200">
            <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-4">
              <el-icon class="text-white text-2xl"><TrendCharts /></el-icon>
            </div>
            <h4 class="text-xl font-semibold text-gray-900 mb-3">业务技能</h4>
            <ul class="space-y-2 text-gray-700 text-sm">
              <li>• 市场营销</li>
              <li>• 客户服务</li>
              <li>• 财务分析</li>
              <li>• 运营优化</li>
            </ul>
          </div>
          
          <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6 border border-orange-200">
            <div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center mb-4">
                              <el-icon class="text-white text-2xl"><Star /></el-icon>
            </div>
            <h4 class="text-xl font-semibold text-gray-900 mb-3">创新思维</h4>
            <ul class="space-y-2 text-gray-700 text-sm">
              <li>• 设计思维</li>
              <li>• 创新方法</li>
              <li>• 问题解决</li>
              <li>• 创意激发</li>
            </ul>
          </div>
          
          <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-2xl p-6 border border-red-200">
            <div class="w-16 h-16 bg-red-500 rounded-2xl flex items-center justify-center mb-4">
                              <el-icon class="text-white text-2xl"><TrendCharts /></el-icon>
            </div>
            <h4 class="text-xl font-semibold text-gray-900 mb-3">国际化</h4>
            <ul class="space-y-2 text-gray-700 text-sm">
              <li>• 跨文化沟通</li>
              <li>• 国际商务</li>
              <li>• 语言技能</li>
              <li>• 全球视野</li>
            </ul>
          </div>
          
          <div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-2xl p-6 border border-indigo-200">
            <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-4">
              <el-icon class="text-white text-2xl"><Star /></el-icon>
            </div>
            <h4 class="text-xl font-semibold text-gray-900 mb-3">软技能</h4>
            <ul class="space-y-2 text-gray-700 text-sm">
              <li>• 时间管理</li>
              <li>• 压力管理</li>
              <li>• 职业规划</li>
              <li>• 个人品牌</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 服务流程 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">服务流程</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
          <div class="text-center">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span class="text-blue-600 font-bold text-2xl">1</span>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">需求分析</h4>
            <p class="text-gray-600 text-sm">深入了解企业培训需求</p>
          </div>
          
          <div class="text-center">
            <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span class="text-green-600 font-bold text-2xl">2</span>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">方案设计</h4>
            <p class="text-gray-600 text-sm">定制个性化培训方案</p>
          </div>
          
          <div class="text-center">
            <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span class="text-purple-600 font-bold text-2xl">3</span>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">实施培训</h4>
            <p class="text-gray-600 text-sm">专业讲师团队授课</p>
          </div>
          
          <div class="text-center">
            <div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <span class="text-orange-600 font-bold text-2xl">4</span>
            </div>
            <h4 class="text-lg font-semibold text-gray-900 mb-2">效果评估</h4>
            <p class="text-gray-600 text-sm">跟踪培训效果和改进</p>
          </div>
        </div>
      </div>

      <!-- 成功案例 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">成功案例</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div class="border-l-4 border-blue-500 pl-6">
            <h4 class="text-xl font-semibold text-gray-900 mb-3">某互联网公司技术培训</h4>
            <p class="text-gray-600 mb-4">
              为该公司200名开发人员提供为期3个月的技能提升培训，涵盖前端开发、后端架构、DevOps等热门技术领域。
            </p>
            <div class="flex items-center gap-4 text-sm text-gray-500">
              <span>培训人数：200人</span>
              <span>培训时长：3个月</span>
              <span>满意度：95%</span>
            </div>
          </div>
          
          <div class="border-l-4 border-green-500 pl-6">
            <h4 class="text-xl font-semibold text-gray-900 mb-3">某制造企业管理培训</h4>
            <p class="text-gray-600 mb-4">
              为该公司中层管理人员提供领导力、团队管理、项目管理等核心管理技能培训，显著提升管理效率。
            </p>
            <div class="flex items-center gap-4 text-sm text-gray-500">
              <span>培训人数：50人</span>
              <span>培训时长：2个月</span>
              <span>满意度：92%</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 联系我们 -->
      <div class="bg-white rounded-3xl shadow-xl border border-gray-200 p-8 mb-16">
        <h3 class="text-3xl font-bold text-gray-900 mb-8 text-center">联系我们</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div>
            <h4 class="text-xl font-semibold text-gray-900 mb-4">企业培训咨询</h4>
            <div class="space-y-4">
              <div class="flex items-center gap-3">
                <el-icon class="text-blue-600"><Phone /></el-icon>
                <span class="text-gray-700">400-123-4567</span>
              </div>
              <div class="flex items-center gap-3">
                <el-icon class="text-blue-600"><Message /></el-icon>
                <span class="text-gray-700">enterprise@edulivelink.com</span>
              </div>
              <div class="flex items-center gap-3">
                <el-icon class="text-blue-600"><Location /></el-icon>
                <span class="text-gray-700">北京市朝阳区科技园区</span>
              </div>
            </div>
          </div>
          
          <div>
            <h4 class="text-xl font-semibold text-gray-900 mb-4">培训需求咨询</h4>
            <form @submit.prevent="submitEnterprise" class="space-y-4">
              <input 
                v-model="enterpriseForm.company"
                type="text" 
                placeholder="公司名称"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
              <input 
                v-model="enterpriseForm.contact"
                type="text" 
                placeholder="联系人"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
              <input 
                v-model="enterpriseForm.phone"
                type="tel" 
                placeholder="联系电话"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
                required
              >
              <textarea 
                v-model="enterpriseForm.requirements"
                placeholder="培训需求描述"
                rows="3"
                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none resize-none"
                required
              ></textarea>
              <button 
                type="submit"
                class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition-colors"
              >
                提交培训需求
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { UserFilled, VideoPlay, DataAnalysis, Monitor, User, TrendCharts, Star, Phone, Message, Location } from '@element-plus/icons-vue'

const enterpriseForm = reactive({
  company: '',
  contact: '',
  phone: '',
  requirements: ''
})

const submitEnterprise = () => {
  if (!enterpriseForm.company || !enterpriseForm.contact || !enterpriseForm.phone || !enterpriseForm.requirements) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  ElMessage.success('感谢您的咨询！我们会尽快与您联系，为您提供专业的培训方案。')
  
  // 重置表单
  enterpriseForm.company = ''
  enterpriseForm.contact = ''
  enterpriseForm.phone = ''
  enterpriseForm.requirements = ''
}
</script>

<style scoped>
@keyframes blob {
  0% { transform: translate(0px, 0px) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
</style>
